<template>
  <div class="seller">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-tabs
        v-model="active"
        swipeable
      >
        <van-tab title="全部订单">
          <div class="allorder">
            <div
              class="order"
              v-for="item in allorder"
              :key="item.id"
              @click="todetail(item.OrderNum)"
            >
              <van-row style="padding:5px;border-bottom:1px solid lightgray">
                <van-col span="3">
                  <van-image
                    width="1.0rem"
                    height="1.0rem"
                    :src="'apis/kuan_api/photo/'+item.user_img"
                    round
                  />
                </van-col>
                <van-col span="15">
                  <p>{{item.user_nickname}}</p>
                </van-col>
                <van-col span="6">
                  <p>{{item.OrderNum}}</p>
                </van-col>
              </van-row>
              <div>
                <van-row style="padding:5px">
                  <van-col span="6">
                    <van-image
                      width="2.2rem"
                      height="2.2rem"
                      :src="'apis/kuan_api/trade/'+item.filelist"
                      fit="contain"
                    />
                  </van-col>
                  <van-col span="18">
                    <!-- 未完成 -->
                    <p style="text-align:right;margin:0">
                      <van-tag
                        type="danger"
                        v-if="item.payment==0"
                      >未完成</van-tag>
                      <van-tag
                        type="warning"
                        v-else-if="item.payment==1"
                      >已发货</van-tag>
                      <van-tag
                        type="primary"
                        v-else-if="item.payment==2"
                      >已完成</van-tag>
                    </p>
                    <!-- 订单标题 -->
                    <p
                      class="txt"
                      style="font-size:15px"
                    >
                      {{item.title}}
                    </p>
                    <!-- 商品参数 -->
                    <p style="color:lightgray;margin:5px">
                      {{item.yunxing}} + {{item.rongliang}}
                    </p>
                    <!-- 商品价格 -->
                    <p
                      class="txt"
                      style="font-size:18px;text-align:right"
                    >
                      ￥{{item.price}}
                    </p>
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="未完成订单">
          未完成订单
        </van-tab>
        <van-tab title="已完成订单">
          已完成订单
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "seller",
  data() {
    return {
      active: 0,
      allorder: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取所有订单
    getallorder() {
      this.axios
        .post("apis/kuan_api/order.php", {
          code: 3,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          this.allorder = res.data.data;
          console.log(this.allorder);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 订单详情
    todetail(ordernum) {
      this.$router.push({
        path: "/orderdetail",
        query: { ordernum: ordernum },
      });
    },
  },
  created() {
    this.getallorder();
  },
};
</script>

<style scoped>
.allorder {
  height: 100vh;
  background-color: lightgray;
  padding-top: 5px;
}
.order {
  width: 95%;
  margin: 0 auto;
  background-color: white;
  border-radius: 7px;
  margin-bottom: 15px;
}
.txt {
  margin: 0;
}
</style>